<template>
	<view>
		<view class="dz-from dz-from-t" v-show="isshow">
			<view class="dz-from-t-title">{{setInfo.detail.site_name}}</view>
			<view class="dz-from-top">
				<view class="dz-from-time">
					<view class="iconfont icon-shijian"></view>
					<view>巡检时间:</view>
					<view class="shenpi-list-r">{{setInfo.detail.checktime}}</view>
				</view>
				<view class="dz-from-time">
					<view class="iconfont icon-shijian"></view>
					<view>开始时间:</view>
					<view class="shenpi-list-r">{{setInfo.detail.begintime}}</view>
				</view>
				<view class="dz-from-time">
					<view class="iconfont icon-shijian"></view>
					<view>结束时间:</view>
					<view class="shenpi-list-r">{{setInfo.detail.endtime}}</view>
				</view>
			</view>
		</view>
		<view class="dz-line" v-show="isshow && setInfo.detail.item.length > 0"></view>
		<view class="dz-from dz-from-column" v-show="isshow && setInfo.detail.item.length > 0">
			<view class="dz-jcx">
				<view>检查项</view>
				<view class="dz-from-jc">
					<view>正常</view>
					<view>异常</view>
				</view>
			</view>
			<view class="dz-jcx" v-for="(item,index) in setInfo.detail.item" :key="index">
				<view class="dz-jcx-l">
					<view class="dz-jcx-no">{{index+1}}</view>
					{{item.item_name}}
				</view>
				<radio-group v-if="item.type == 1" class="dz-from-jc" @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(ite, ind) in item.check" :key="ite">
						<view>
							<radio disabled="true" :value="ite" :checked="(item.id+'_'+item.value) == ite"
								color="#4d72ff" style="transform:scale(0.85)" />
						</view>
					</label>
				</radio-group>
				<textarea disabled="true" :value="item.status == 0 ? '' : item.value" auto-height="true"
					class="dz-jcx-input" :id="index + '_' +item.id" v-if="item.type == 2" @blur="gettext" type="text" />
			</view>
		</view>
		<view class="dz-line" v-show="isshow"
			v-if="content != '' && content != undefined && content != null  || lastimgArr.length > 0"></view>
		<view class="dz-from-bz" v-show="isshow"
			v-if="content != '' && content != undefined && content != null  || lastimgArr.length > 0">
			<view>备注</view>
			<view class="dz-from-bz-text">
				<textarea v-if="content != '' && content != undefined && content != null" :value="content"
					auto-height />
				<view class="dz-from-fj">
					<view ref="input" class="input"></view>
					<view class="dz-from-fj-edit" v-for="(item,index) in lastimgArr" :key="index"
						@tap="showPic(item,'image')">
						<image :src="item" class="dz-from-fj-img-img"></image>
						<view class="dz-from-jian">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dz-line" v-show="isshow"></view>
		<view class="dz-from" v-show="isshow">
			<view>巡检结果</view>
			<view class="dz-from-jc" style="width: 136px;">
				<radio-group class="dz-from-time dz-just" @change="radioResultChange">
					<view class="dz-from-time">
						<radio disabled="true" value="1" :checked="state == 1" color="#4d72ff"
							style="transform:scale(0.85)" />
						<view>正常</view>
					</view>
					<view class="dz-from-time">
						<radio disabled="true" value="2" :checked="state == 2" color="#4d72ff"
							style="transform:scale(0.85)" />
						<view>异常</view>
					</view>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import util from '@/lib/utils/index.js';

	export default {
		data() {
			return {
				id: 0,
				state: 0, //整个巡检点是否正常
				isshow: false,
				code: '',
				setInfo: {
					requestParams: {
						lng: '', //经度
						lat: '', //纬度
						site_id: 0,
					},
					detail: {}
				},
				content: '',
				lastimgArr: [],
				itemKey: [],
				itemValue: [],
				static_media: '',
			}
		},
		computed: {
			...mapState([
				"userInfo"
			]),
		},
		onLoad(ops) {
			this.static_media = this.$lib.$config.api
			if (ops.id) {
				this.id = ops.id
				this.setInfo.requestParams.site_id = ops.id
			}
		},
		onShow() {
			if (this.userInfo.token == undefined) {
				this.loginOut();
			} else {
				this.getSet()
			}
		},
		methods: {
			loginOut() {
				this.$lib.$store.commit('clearUserInfo')
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			getImg(data) {
				this.imgArr = data
				this.imgArr.push(...this.lastimgArr)
				// console.log(this.imgArr)
			},
			//获取巡检点信息
			async getSet() {
				// console.log('获取巡检点信息')
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.xunjianDetail,
					data: {
						id: this.setInfo.requestParams.site_id
					},
					needLogin: true
				})
				if (res.code == 1) {
					this.isshow = true
					this.lastimgArr = []
					for (let i = 0, leng = res.data.item.length; i < leng; i++) {
						this.$set(res.data.item[i], 'check', [res.data.item[i].id + '_2', res.data.item[i].id + '_1'])
						this.itemValue.push('')
						this.itemKey.push(res.data.item[i].id)
					}
					if (res.data.images) {
						this.lastimgArr = res.data.images
					}
					this.setInfo.detail = res.data
					this.setInfo.detail.checktime = util.timestampToTime(this.setInfo.detail.checktime);
					this.setInfo.detail.begintime = this.formatTime(this.setInfo.detail.begintime)
					this.setInfo.detail.endtime = this.formatTime(this.setInfo.detail.endtime)
					this.state = res.data.state

					this.content = this.setInfo.detail.content && this.setInfo.detail.content == null ? '' : this
						.setInfo.detail.content
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
				}
			},
			formatTime(time) {
				time = (time == 0) ? 0 : util.timestampToTime(time)
				return time
			},
			// 预览图片
			showPic(url, type, index) {
				// this.$lib.$cache.setItem('previewImage', true);
				if (type == 'image') {
					uni.previewImage({
						indicator: "none",
						current: url,
						urls: this.lastimgArr
					});
				} else if (type == 'check') {
					uni.previewImage({
						indicator: "none",
						current: url,
						urls: this.info.check[index].images
					});
				}
			},
		}
	}
</script>

<style>
	page {
		background: #fff
	}

	.dz-from {
		display: flex;
		padding: 18px;
		width: 90%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
	}

	.dz-from-t {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.dz-from-t-title {
		padding-bottom: 10px
	}

	.dz-from-top {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.dz-from-bz {
		display: flex;
		padding: 18px;
		width: 90%;
		margin: 0 auto;
		align-items: flex-start;
		flex-direction: column;
		font-size: 16px;
	}

	.dz-from-time {
		display: flex;
		align-items: center;
		font-size: 15px;
	}

	.dz-from-top .dz-from-time:first-child {
		margin-bottom: 3px;
	}

	.dz-from .iconfont {
		font-size: 18px;
		color: #8d8d8d;
		margin-right: 3px
	}

	.dz-line {
		background: #fafafa;
		height: 8px;
	}

	.dz-from-column {
		flex-direction: column;
	}

	.dz-from .dz-jcx {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		flex: 1;
		margin-bottom: 18px;
	}

	.dz-from .dz-jcx:last-child {
		margin-bottom: 0;
	}

	.dz-jcx-l {
		flex: 1;
		margin-right: 14px;
		width: 70%;
		display: flex;
		align-items: center;
	}

	.dz-jcx-input {
		display: block;
		font-size: 16px;
		line-height: 1.8em;
		height: 1.8em;
		min-height: 1.8em;
		overflow: hidden;
		width: 30%;
		padding: 5px 9px;
		border: solid 1px #d6d6d6;
	}

	.dz-from-jc {
		display: flex;
		justify-content: space-between;
		width: 100px;
	}

	.dz-from-button {
		margin: 18px;
	}

	.dz-from-bz-text {
		width: 100%;
		margin-top: 12px;
	}

	.dz-from-bz-text textarea {
		padding: 12px 0;
		width: 100%;
		font-size: 15px;
		min-height: 30px;
	}

	.dz-from-fj {
		display: flex;
		flex-wrap: wrap;
	}

	.dz-from-fj-edit {
		width: 80px;
		border: solid 1px #efefef;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 80px;
		color: #adadad;
		font-size: 14px;
		margin-right: 10px;
		justify-content: center;
		position: relative;
		margin-bottom: 10px
	}

	.dz-from-fj-edit .iconfont {
		font-size: 24px;
		margin-bottom: 1px
	}

	.dz-from-fj-img-img {
		width: 80px;
		height: 80px;
	}

	.dz-from-jian {
		position: absolute;
		right: 2px;
		top: 2px;
	}

	.dz-from-jian .iconfont {
		color: rgb(255, 255, 255);
		font-size: 11px;
		transform: rotate(45deg);
		border-radius: 50%;
		padding: 3px;
		background: rgb(68, 138, 255);
	}

	.shenpi-list-r {
		color: #9f9f9f;
		margin-left: 7px;
	}

	.dz-just {
		justify-content: space-between;
		width: 100%;
	}

	.dz-jcx-no {
		background: #4d72ff;
		color: #fff;
		font-size: 12px;
		width: 18px;
		height: 18px;
		border-radius: 2px;
		text-align: center;
		line-height: 18px;
		margin-right: 6px;
	}
</style>